<!DOCTYPE html>
<html>
<head>
    <title>RealSense相机实时画面</title>
    <style>
        body { font-family: Arial, sans-serif; text-align: center; }
        #live-view { border: 2px solid #333; margin: 20px; }
        button { 
            padding: 10px 20px; 
            font-size: 16px; 
            background: #4CAF50; 
            color: white; 
            border: none; 
            cursor: pointer;
        }
        button:hover { background: #45a049; }
        #captured-img { max-width: 640px; margin-top: 20px; }
    </style>
</head>
<body>
    <h1>RealSense相机控制</h1>
    
    <div>
        <h2>实时画面</h2>
        <img id="live-view" src="{{ url_for('video_feed') }}" width="640" height="480">
    </div>
    
    <button onclick="capturePhoto('/capture')">拍照</button>
    <button onclick="capturePhoto('/detect')">检测</button><br>
    sku_id<input type="text" id="sku_id" placeholder="10"/><br>
    sku_scale<input type="text" id="sku_scale" placeholder="0.8"/><br>
    <button onclick="capturePhoto('/findSku')">查找</button>
    <div id="result">
        <h2>最新照片</h2>
        <img id="captured-img" src="">
    </div>

    <script>
        function capturePhoto(command) {
            if(command == "/findSku"){
                command = command+"?sku_id="+document.getElementById('sku_id').value+"&sku_scale="+document.getElementById('sku_scale').value
            }
            fetch(command)
                .then(response => response.json())
                .then(data => {
                    if (data.image_url) {
                        document.getElementById('captured-img').src = data.image_url + '?t=' + new Date().getTime();
                    }
                    alert(data.message || "操作完成");
                })
                .catch(error => {
                    console.error('Error:', error);
                    alert("拍照失败");
                });
        }
    </script>
</body>
</html>